.left-bottom-options {
  position  : fixed;
  left      : 20px;
  bottom    : 60px;
  background: rgba(0, 0, 0, 0.4);
  color     : #fff;
  font-size : 35px;
  padding   : 3px 5px;
}


.main-container {
  margin-top: 10px;
}

.layui-table img {
  max-width : 60px;
  max-height: 60px;
}

.table-card-box {
  margin-top      : 15px;
  background-color: #eee;
  padding         : 15px 5px;
}

.table-card-item {

  margin-top     : 5px;
  display        : flex;
  justify-content: flex-start;
  align-items    : flex-start;
}

.table-card-item img {
  max-width : 60px;
  max-height: 60px;
}

.table-card-item .item-title {
  padding  : 5px;
  font-size: 16px;
  width    : 20%;
}

.table-card-item .item-value {
  padding         : 5px;
  margin          : 5px;
  background-color: #fff;
  min-width       : 80%;
  white-space     : normal;
  word-break      : break-all;
}

.layui-form-radio {
  white-space: nowrap;
}


.quick-input-item {
  width : 120px;
  margin: 3px 0;
}

.quick-input-item.sm-quick-input-item .layui-btn {
  line-height: 24px;
  height     : 24px;
  font-size  : 12px;
  padding    : 0 12px;

}

.quick-input-item.sm-quick-input-item .layui-input {
  line-height: 24px;
  height     : 24px;
}

.ul-flex {
  display: flex;
}


@media screen and (max-width: 768px) {
  .layui-body {
    left: 0;
  }

  .layui-layout-admin .layui-footer {
    left: 0;
  }

  .layui-layout-admin .layui-logo {
    width: 115px;
  }

  .layui-layout-admin .layui-side {
    width     : 100%;
    overflow-x: hidden;
    height    : 100%;
    position  : unset;
  }

  .layui-layer-content .layui-hide-xs {
    display: unset !important;
  }

  .layui-nav-tree {
    width : 100%;
    height: 100%;
  }
}

.options-container {
  margin: 35px 0;
}

.detail-options {
  display    : flex;
  align-items: center;

  justify-content: space-between;

}

.comment-container {
  margin-top: 35px;
}

.options-item {
  width          : 20%;
  text-align     : left;
  display        : flex;
  align-items    : center;
  justify-content: center;
  cursor         : pointer;
}

.options-item .info {
  padding-left: 15px;
}

.options-item i {
  font-size       : 30px;
  padding         : 15px;
  border          : 2px solid #8c92a4;
  border-radius   : 50px;
  color           : #8c92a4;
  background-color: #ddd;
}

.options-item .title {
  color      : #40485b;
  font-size  : 16px;
  font-weight: 600;
}

.options-item .nums {
  color      : #8c92a4;
  font-size  : 14px;
  font-weight: 400;
  margin-top : 5px;
}

pre {
  border-color: #66CCFF;
}

.topic-item {
  display: flex;
  padding: 15px;
}

.topic-item .pic-box {
  width  : 100px;
  height : 100px;
  padding: 4px;
}

.topic-item .pic-box .pic {
  width : 100%;
  height: 100%;
}

.topic-item .info-box {
  position   : relative;
  margin-left: 15px;
  width      : calc(100% - 100px);
}

.topic-item .info-box .info-plus {
  
  margin-top: 5px;
}

.topic-item .info-box .info-main .subtitle {
  margin-top        : 5px;
  overflow          : hidden;
  max-height: 40px;
}

.topic-item .info-box .info-main .title {
  font-size  : 14px;
  font-weight: bold;
}

.info-plus-item {
  display        : inline-block;
  color          : #808080;
  text-decoration: none;
  margin-right   : 15px;
}

.info-plus-item .number {
  color      : #eb7350;
  font-weight: bold;
}

.user-tab-list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.user-tab-list .user-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 15px;
}

.user-tab-list .user-item .user-avatar {
  height: 48px;
  width: 48px;
  display: block;
  border-radius: 30px;
  background-size: cover;
  background-position: center;
  border: 1px solid #eee;
}

.user-tab-list .user-item .user-info {
  display: block;
  margin-left: 10px;
}

.user-tab-list .user-item .user-info .time {
  line-height: 20px;
  font-size: 13px;
  color: #999;
}

.u-hidden{
  display: none;
}

.comment-hidden-tips{
  color: #999;
}